;(function($){
    "use strict";

    // console.log($);

    // 不需要操作DOM的功能
    // $.xxx = function(){
    //     console.log("自定义的方法1")
    // }
    // $.extend({
    //     xxx:function(){
    //         console.log("自定义的方法2")
    //     }
    // })

    // 需要操作DOM的功能
    // $.fn.xxx = function(){
    //     console.log("自定义的方法3")
    // }
    // $.fn.extend({
    //     xxx:function(){
    //         console.log("自定义的方法4")
    //     }
    // })
    // $.extend($.fn, {
    //     xxx:function(){
    //         console.log("自定义的方法5")
    //     }
    // })


    $.fn.banner = function(data, ops={}){
        // 1. 处理参数
        let {
            btn = true,
            list = true,
            autoPlay = true,
            delayTime = 3000,
            moveTime = 300,
            index = 0,
            currentClass = "active"
        } = ops;

        let prev;

        const that = this;

        // 2. 根据数据，渲染页面结构
        // 图片
        init();

        function init(){
            let str = "";
            $.each(data, (idx, val)=>{
                str += `<img src="${val.src}" alt="${val.alt}" title="${val.title}">`;
            })
            $("<div class='imgbox'>"+str+"</div>").appendTo(that);
        }

        // 3. 左右按钮切换轮播图
        if(btn){
            $("<input type='button' id='left' value='<'>").appendTo($("<div class='btns'></div>").appendTo(this)).parent().append($("<input type='button' id='right' value='>'>")).children("#left").click(leftClick).end().children("#right").click(rightClick)
        }
        function leftClick(){
            if(index === 0){
                index = data.length-1;
                prev = 0;
            }else{
                index--;
                prev = index+1;
            }
            move(prev,index,-1)
        }
        function rightClick(){
            if(index === data.length-1){
                index = 0;
                prev = data.length-1;
            }else{
                index++;
                prev = index-1;
            }
            move(prev,index,1)
        }

        // 4. 分页器切换轮播图
        if(list){
            // 渲染页面结构并绑定事件
            let str = "";
            $.each(data, idx => {
                str += `<span></span>`;
            });
            $("<div class='list'>"+str+"</div>").appendTo(this).children("span").eq(index).addClass(currentClass).end().click(function(){
                if($(this).index() > index){
                    // console.log("左")
                    move(index, $(this).index(), 1)
                }
                if($(this).index() < index){
                    // console.log("右")
                    move(index, $(this).index(), -1)
                }
                // 当前点击的，就是下一次要走的
                index = $(this).index();
            })
        }

        // 5. 自动播放
        if(autoPlay){
            let t = setInterval(() => {
                rightClick()
            }, delayTime);

            this.hover(function(){
                clearInterval(t)
            },function(){
                t = setInterval(() => {
                    rightClick()
                }, delayTime);
            })
        }

        function move(prev,next,d){
            // 先设置要走的图片的默认位置
            // 开始走
            // 再设置要进来的图片的默认位置
            // 开始进来
            that.children(".imgbox").children().eq(prev).css({
                left: 0
            }).stop().animate({
                left: -that.children(".imgbox").children().eq(0).width() * d
            }, moveTime).end().eq(next).css({
                left: that.children(".imgbox").children().eq(0).width() * d
            }).stop().animate({
                left: 0
            }, moveTime)

            that.children(".list").children("span").eq(next).addClass(currentClass).siblings().removeClass(currentClass)
        }
    }

})(jQuery);
